<!-- 案件-添加案件 页面 -->
<template>
	<view class="add-case-container-box">
		<view class="case-total">全部案件 ({{ caseDataList.length }})</view>

		<!-- 循环渲染出每一项案件记录 -->
		<view class="case-item-box" v-for="caseItem in caseDataList" :key="caseItem.id" @click="caseItemClick(caseItem)">
			<view class="case-action" style="height: 94rpx;">
				<view>案由</view>
				<view class="right-text">{{ caseItem.lawyer_cause }}</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="case-action">
				<view>原告</view>
				<view class="right-text">{{ caseItem.plaintiff_name }}</view>
			</view>
			<view class="case-action">
				<view>被告</view>
				<view class="right-text">{{ caseItem.defendant_name }}</view>
			</view>
			<view class="case-action">
				<view>{{ caseItem.lawyer_trial }}</view>
				<view>{{ caseItem.create_time }}</view>
			</view>
		</view>

		<!-- 添加案件 按钮 -->
		<bottom-btn text="添加案件" @click="addCaseClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 999,
			},
			// 此值用于判断是否是从 to-do-list 页面跳转而来
			isToDoList: false,
			// 模拟案件列表数据
			caseDataList: []
		};
	},
	onLoad(options) {
		this.getData()
		// 如果来源页 为添加待办事项页面则 isToDoList 为 true
		if (options.isToDoList) {
			this.isToDoList = true;
		}
	},
	onShow() {
		// 判断是否需要刷新数据
		if(this.vuex_isSubmit) {
			this.getData()
			this.$u.vuex('vuex_isSubmit', false)
		}
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getLawCaseList(this.sortData)
			if(!res) return
			this.caseDataList = res		// 这里就不使用分页逻辑处理数据了
			// console.log(this.caseDataList);
		},
		// 添加案件 按钮的点击事件
		addCaseClick() {
			this.$u.route('/myPackageA/pages/views/add-case-detail');
		},
		// 对应案件项点击事件（来源页不同则该事件业务逻辑不同）
		caseItemClick(datas) {
			console.log('被点项的数据', datas);
			// 先清空再赋值，将被点击的案件数据存储到 vuex 中
			this.$u.vuex('vuex_toDoListCase', {});
			this.$u.vuex('vuex_toDoListCase', datas);
			// 如果来源页是 添加待办事项 页面，则此处的点击表示选择该案件，而不是查看详情
			if (this.isToDoList) {
				// 跳转回 添加待办事项 页面
				this.$u.route({
					type: 'back'
				});
				// 并将 isToDoList 重置为 false
				this.isToDoList = false;
			} else {
				// 来源页不是 添加待办事项 页面点击了对应案件项则进携参入该案件的详情页
				this.$u.route({
					type: 'to',
					url: '/myPackageA/pages/views/add-case-item-detail?id=' + datas.id // 将案件 id 传递过去
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.add-case-container-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-bottom: 90rpx;
	.case-total {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #97979f;
		padding-left: 26rpx;
	}
	.case-item-box {
		background-color: white;
		padding: 0 26rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #97979f;
		margin-bottom: 20rpx;
		.case-action:nth-child(1) {
			padding-right: 52rpx;
			position: relative;
			&::after {
				content: ' ';
				display: block;
				width: 750rpx;
				height: 1px;
				background-color: #e7eaf0;
				position: absolute;
				bottom: 1px;
				left: -26rpx;
			}
		}
		.case-action:nth-child(3) {
			position: relative;
			&::after {
				content: ' ';
				display: block;
				width: 750rpx;
				height: 1px;
				background-color: #e7eaf0;
				position: absolute;
				bottom: 1px;
				left: -26rpx;
			}
		}
		.case-action {
			min-height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.icon {
				position: absolute;
				top: 50%;
				right: 0rpx;
				transform: translateY(-50%);
			}
		}
	}
}
.right-text {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}
</style>
